.notice-card {
  @apply absolute -bottom-6 left-1/2 z-10 -translate-x-1/2 translate-y-full rounded-lg border border-[var(--gap-text)] bg-white px-4 py-3 leading-none;
  width: 60%;
  max-width: 380px;
  box-shadow: 6px 6px 12px 1px rgba(81, 94, 112, 0.05);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.dot-1,
.dot-2,
.dot-3 {
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  display: inline-block;
}

.dot-2 {
  animation-delay: 0.8s;
}

.dot-3 {
  animation-delay: 1.4s;
}
